import { RestSelectProps } from "../rest-select"
import { Filter, Renderer } from "./types"
import InputRenderer from "./renders/InputRenderer.vue"
import SelectRenderer from "./renders/SelectRenderer.vue"
import RangeInputRenderer from "./renders/RangeInputRenderer.vue"
import RestSelectRenderer from "./renders/RestSelectRenderer.vue"
import RangePickerRenderer from "./renders/RangePickerRenderer.vue"

export const inputRenderer: Renderer = {
  supports(filter) {
    return filter.type === "input"
  },
  component: InputRenderer,
}

export const selectRenderer: Renderer = {
  supports(filter) {
    return filter.type === "select" && Array.isArray(filter?.options)
  },
  component: SelectRenderer,
}

export const restSelectRenderer: Renderer = {
  supports(
    filter: Filter<{
      type: "select"
      options: {
        datasource: RestSelectProps["datasource"]
        formatter: RestSelectProps["formatter"]
      }
    }>,
  ) {
    return (
      filter.type === "select" &&
      !Array.isArray(filter?.options) &&
      !!filter?.options?.datasource
    )
  },
  component: RestSelectRenderer,
}

export const rangePickerRenderer: Renderer = {
  supports(filter) {
    return filter.type === "range-picker"
  },
  component: RangePickerRenderer,
}

const rangeInputRenderer: Renderer<{ type: "range" }> = {
  supports(filter) {
    return filter.type === "range"
  },
  component: RangeInputRenderer,
}

export const defaultRenderers: Renderer[] = [
  inputRenderer,
  selectRenderer,
  restSelectRenderer,
  rangePickerRenderer,
  rangeInputRenderer,
]
